<template>
  <j-form-item label="背景" >
    <j-select v-model="item.backgroundType" style="width: 76px;margin-right: 8px">
      <j-option
          v-for="option in item.optionalBackgroundTypeList"
          :key="option.value"
          :label="option.label"
          :value="option.value"
      />
    </j-select>
    <j-color-picker v-model="item.colorValue"  v-if="item.backgroundType === '0'"/>
    <common-icon-pic-item :key="item.id" :item="item" v-if="item.backgroundType === '1'">
    </common-icon-pic-item>
  </j-form-item>
  <j-form-item label="背景展示方式" v-if="item.backgroundType === '1'">
    <j-radio-group v-model="item.showType">
      <j-radio
          v-for="radioItem in item.optionalShowTypeList"
          :key="radioItem.value"
          :label="radioItem.value">
        {{ radioItem.label }}
      </j-radio>
    </j-radio-group>
  </j-form-item>
  <j-form-item label="透明度" v-if="item.backgroundType === '1'">
      <j-space
          vertical
          align="start"
          style="width: 200px !important;">
        <j-slider
            v-model="item.transparence"
            style="width: 190px; padding-left:0px;">
        </j-slider>
      </j-space>
      <j-input-number
          precision="0"
          :parser="(value) => parseInt(value)"
          v-model="item.transparence"
          style="width: 72px;font-weight: 400;">
      </j-input-number>
  </j-form-item >
</template>

<script setup>
import CommonIconPicItem from "../common/CommonIconPicItem.vue";

const props = defineProps(['item'])
const item = props.item


// 颜色选择器初始化默认值
if (isEmpty(item.colorValue)) {
  item.colorValue = '#000000'
}
// 判断是否为空
function isEmpty(data) {
  return ((data === undefined) || (data === null) || (data === ''))
}
</script>

<style scoped>

</style>
